<template>
  <div>
    <div v-if="pageType=='cartList'">
      <div class="preferential" style="text-align: left">
        <label class="aui-label-danger aui-label-outlined"
               style="margin-left: 0.5rem">{{ saleType == 'buyPresent' ? '买赠' : '返利'}}</label>
        <span class="cjy-sec-title" style="color: rgb(44, 62, 80)
">{{title}}</span>
        <a class="cjy-span" v-if="!selectNum">
          去选取
        </a>
        <a class="cjy-span" v-if="selectNum">
          {{addMoney ? '已加价：' : '已赠'}}{{ addMoney ? '¥' + parseFloat(addMoney * selectNum).toFixed(2) : maxNum + '份'}}</a>
      </div>
    </div>
    <div v-else style="position: relative;width: 100%;height: 100%; ">

      <div class="cjy-moldeTitle" style="">
        {{title}}
      </div>

      <div style="height:20rem;padding:2.2rem  0 3rem 0 ;width: 100% ;position: relative;overflow: hidden">
        <vertical-scroll :lengths="3" ref="translateMain">
          <div style="width: 100%">
            <ul class="cjy-selectLadderMelue">
              <li class="cjy-selectLadderList"
                  v-if="addMoney && giftType == 1">

                <div class="cjy-regular-title">

                <span style="float: none;padding:0; color:rgb(234, 57, 57)">
                  {{'共计:¥' + addMoney * selectNum }} </span>
                  <i style="font-size: 0.6rem">{{ '(换购单价：¥' + addMoney + ')'}}</i>
                </div>


                <div class="cjy-add-sub" style=" padding:0 ;position:relative;padding-right:0">
                  <div class="cjy-button-box" @click="add">
                    <div class="cjy-add-button"></div>
                  </div>

                  <input style="width: 2rem" type="text" :value="selectNum+'/'+ maxNum" readonly
                         class="cjy-add-sub-showNumb">

                  <div class="cjy-button-box" @click="sub">
                    <div class="cjy-sub-button"></div>
                  </div>

                </div>
              </li>
              <!--不可选赠品-->
              <li v-else class="cjy-selectLadderList" style="text-align: left">
                <span v-if="giftType" style="margin-left: 0.5rem;">礼包：{{giftName}}</span>
                <span v-else style="margin-left: 0.5rem;">礼券：{{giftName}}</span>
                <span style="position: absolute;right: 0.75rem">
                                已免费赠送：{{maxNum}}份
                              </span>
              </li>

              <!--赠品-->
              <li
                v-for="(item,index) in giftGoodsList" :key="index"
                class="cjy-show-gift-list">
                <label class="aui-label-danger aui-label-outlined cjy-icon" style="margin-left: 0.5rem;">商</label>
                <span class="cjy-regular-name">

              {{item.goodsName}}</span>
                <span class="cjy-regular-price"> 价值：<span
                  style="color: rgb(234, 57, 57)">¥{{ parseFloat(item.goodsPrice).toFixed(2)}}</span></span>
                <span class="cjy-regular-num">{{item.giveQuantity}}件</span>
              </li>
              <!--优惠券-->
              <li v-if="item.auditorTime"
                  v-for="(item,index) in giftCouponList" :key="index"
                  class="cjy-show-gift-list" style="">
                <label class="aui-label-danger aui-label-outlined cjy-icon" style="margin-left: 0.5rem;">券</label>
                <span class="3cjy-oveflow" style=" max-width: 50%"> {{item.couponName}}</span>
                <!--<span-->
                <!--style="float: right;font-size: 0.6rem;vertical-align: bottom;line-height: 1.5rem">活动截止至：{{ item.availableEndTime ? item.availableEndTime.substr(5) : ''}}-->
                <!--</span>-->
              </li>

              <li v-if="!item.auditorTime"
                  v-for="(item,index) in giftCouponList" :key="index"
                  class="cjy-show-gift-list" style="">
                <label class="aui-label-danger aui-label-outlined cjy-icon"
                       style="margin-left: 0.5rem;min-width:100%">券</label>
                <span> {{item.couponName}}</span>
              </li>
              <li class="cjy-show-gift-list">
                <span style="margin-left:0.5rem">！礼品有限，送完即止
                </span>
              </li>
            </ul>

          </div>

        </vertical-scroll>
      </div>
    </div>

  </div>
</template>

<script>
  import VerticalScroll from '@/real-components/VerticalScroll'
  import showBox from '@/real-components/CartPullRegular'

  export default {
    data () {
      return {
        title: '',
        selectNum: 0,
        addMoney: '',
        promCode: '',
        giftVO: null,
        maxNum: 0,
        giftName: '',
        promId: '',
        saleType: '',
        giftGoodsList: [],
        giftCouponList: [],
        giftType: 0,
      }
    },
    props: {
      pageType: {
        type: String,
        default: ''
      },
      buyMoreDetail: {
        type: Object,
        default: () => {
        }
      }
    },
    components: {VerticalScroll, showBox},
    watch: {
      buyMoreDetail (data) {
        this.changeData()
        this.initData()
      },
      buyMoreData () {
        this.initData()
      }
    },
    computed: {
      buyMoreData () {
        return this.$store.state.cjy.buyMoreData
      },
    },
    methods: {
      add () {
        var selectNum = this.selectNum + 1
        var maxNum = this.maxNum

        if (selectNum <= maxNum) {
          var config = this.getConfig(selectNum)

          this.$store.commit('cjy/CHANGE_BUY_MORE_LIST', config)
          this.selectNum = selectNum
        }
      },

      sub () {

        var selectNum = this.selectNum - 1
        if (selectNum >= 0) {
          this.getConfig(selectNum)
          this.$store.commit('cjy/CHANGE_BUY_MORE_LIST', this.getConfig(selectNum))
          this.selectNum = selectNum
        }
      },
      changeData () {
        var type
        if (!this.buyMoreDetail) {
          return
        }
        this.saleType = this.buyMoreDetail.saleType
        this.title = this.buyMoreDetail.promName
        this.addMoney = this.buyMoreDetail.addMoney || 0
        this.promId = this.buyMoreDetail.promId
        this.promCode = this.promCode
        this.giftVO = this.buyMoreDetail.giftVO
        this.couponVO = this.buyMoreDetail.couponVO
        if (this.giftVO) {
          type = 'giftVO'
        } else {
          type = 'couponVO'
        }
        this.maxNum = this.buyMoreDetail[type].times || 0
        this.giftType = this.buyMoreDetail[type].giftType || 0
        this.giftName = this.buyMoreDetail[type].giftName || this.buyMoreDetail.promName
        this.giftGoodsList = this.buyMoreDetail[type].giftGoodsList || []
        this.giftCouponList = this.buyMoreDetail[type].giftCouponList || [this.couponVO]

      },
      initData () {
        if (this.saleType == 'buyPresent') {
          this.selectNum = this.maxNum
          return
        }

        var promId = this.promId
        var seveDetail = this.buyMoreData.find((item) => {
            return item.promId == promId
          }
        )
        //如果被选中过
        if (seveDetail) {
          var selectNum = seveDetail.selectNum
          if (selectNum < this.maxNum) {
            this.selectNum = selectNum
            if (parseFloat(this.addMoney) == 0) {
              this.selectNum = this.maxNum
              this.$store.commit('cjy/CHANGE_BUY_MORE_LIST', this.getConfig(this.maxNum))
            }
          } else if (selectNum == this.maxNum) {
            this.selectNum = selectNum
          }
          else {
            this.$store.commit('cjy/CHANGE_BUY_MORE_LIST', this.getConfig(this.maxNum))
          }
        }
        //如果没选中将他放入已选
        else {
          if (!this.addMoney) {
            this.$store.commit('cjy/CHANGE_BUY_MORE_LIST', this.getConfig(this.maxNum))
          } else
            this.$store.commit('cjy/CHANGE_BUY_MORE_LIST', this.getConfig(0))
        }


      },
      getConfig (selectNum) {
        var config = {
          selectNum,
          giftVO: this.giftVO,
          couponVO: this.couponVO,
          addMoney: this.addMoney,
          promId: this.promId,
          promCode: this.promCode
        }
        return config
      }
    },
    mounted () {
      this.changeData()
      this.initData()
    }
  }
</script>

<style scoped="">
  .preferential span, .cjy-add-sub {
    float: right;
    padding-right: 0.75rem;
    color: #EF5423;
    margin-top: 0.1rem;
    height: 2rem;
  }

  .cjy-add-sub-showNumb {
    height: 100%;
    width: 1rem;
    text-align: center;
    vertical-align: middle;
    float: right;
  }

  .cjy-add-button, .cjy-sub-button {
    border: 1px solid rgb(234, 57, 57);
    border-radius: 50%;
    height: 1rem;
    width: 1rem;
    display: block;
    position: relative;
    box-sizing: content-box;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0;
    right: 0;
  }

  .cjy-button-box {
    float: right;
    position: relative;
    height: 2rem;
    width: 1.5rem;
  }

  .cjy-add-button::after, .cjy-sub-button::after {
    content: '';
    width: 0.6rem;
    height: 0rem;
    border-top: thin solid rgb(234, 57, 57);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .cjy-sub-button {
    border: 1px solid gray;
  }

  .cjy-sub-button::after {
    border-top: 1px solid gray;
  }

  .cjy-add-button::before {
    content: '';
    width: 0;
    height: 0.6rem;
    border-left: 1px solid rgb(234, 57, 57);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .cjy-moldeTitle {
    text-align: center;
    vertical-align: middle;
    height: 2.2rem;
    border-bottom: 1px solid #F1F1F1;
    line-height: 2.2rem;
    position: absolute;
    width: 100%;
    z-index: 100;
    background: white;
    font-weight: 800;
    font-size: 0.75rem;
  }

  .cjy-selectLadderList {
    border-bottom: 1px solid #F1F1F1;
    height: 2rem;
    line-height: 2rem;
    vertical-align: middle;
    text-align: left;
  }

  .cjy-show-gift-list {
    text-align: left;
    border-top: 1px dashed lightgrey;
    height: 1.5rem;
    line-height: 1.5rem
  }

  .cjy-selectLadderMelue {
    padding: 0 0.7rem;
  }

  .cjy-regular-title {
    display: inline-block;
    padding-left: 0.5rem;
    line-height: 2rem;
    max-width: 70%;
    overflow: hidden;
    height: 2rem;
    font-size: 0.8rem
  }

  .cjy-regular-name, .cjy-regular-price, .cjy-regular-num {
    display: inline-block;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }

  .cjy-regular-price {
    position: absolute;
    right: 3rem;
  }

  .cjy-regular-num {
    position: absolute;
    right: 0.75rem;
  }

  .cjy-regular-name {
    width: 45%;
    /*padding-left: 0.5rem;*/
    position: relative;
    height: 1.5rem;
    line-height: 1.5rem;
    max-width: 40%;
    text-align: left
  }

  .cjy-sec-title {
    float: none !important;
    max-width: 60%;
    overflow: hidden;
    height: 1rem !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: middle;
  }

  .preferential {
    padding: 0.2rem 0.3rem 0.2rem 0;
    line-height: 1rem;
    background: rgba(255, 245, 184, 0.55)

  }

  .preferential a {
    margin-top: 0.2rem;
    padding-right: 1rem;
  }

  .preferential .cjy-span, .preferential .cjy-add-sub {
    float: right;
    padding-right: 1rem;
    color: #EF5423;
    margin-top: 0.2rem;
  }

  .cjy-add-sub-showNumb {
    height: 100%;
    width: 1rem;
    text-align: center;
    vertical-align: middle;
    float: right;
  }

  .cjy-add-button, .cjy-sub-button {
    border: 1px solid rgb(234, 57, 57);
    border-radius: 50%;
    height: 1rem;
    width: 1rem;
    top: 50%;
    transform: translatey(-50%);
    display: block;
    position: relative;
  }

  .cjy-add-button::after, .cjy-sub-button::after {
    content: '';
    width: 0.6rem;
    height: 0rem;
    border-top: thin solid rgb(234, 57, 57);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .cjy-sub-button {
    border: 1px solid gray;
  }

  .cjy-sub-button::after {
    border-top: thin solid gray;
  }

  .cjy-add-button::before {
    content: '';
    width: 0;
    height: 0.6rem;
    border-left: thin solid rgb(234, 57, 57);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .cjy-button-box {
    float: right;
    padding: 2px;
  }

  .cjy-right {
    float: right !important;
    color: rgb(234, 57, 57);
  }

  .cjy-der-down {
    position: relative;
    display: inline-block;
    padding-right: 1rem;
    float: right !important;
    color: rgb(234, 57, 57);
  }

  .cjy-der-down:before {
    content: '';
    width: 0.4rem;
    height: 0.4rem;
    position: absolute;
    top: 47%;
    right: 0.3rem;
    margin-top: -0.2rem;
    background: transparent;
    border: 1px solid rgb(234, 57, 57);
    border-top: none;
    border-right: none;
    z-index: 2;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  .cjy-oveflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
  }
</style>
